<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<%--    <link rel="stylesheet"--%>
<%--          href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">--%>
<%--    <!-- CSS Reset -->--%>
<%--    <link rel="stylesheet"--%>
<%--          href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">--%>
<%--    <!-- Milligram CSS -->--%>
<%--    <link rel="stylesheet"--%>
<%--          href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css">--%>
    <link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui.css">
    <script src="https://qidian.gtimg.com/lulu/pure/js/common/polyfill.js"></script>


</head>

<body>
<div class="content bg"  >
    <div class="box drag">
        <div>
            <h2>LoGiN</h2>
        </div>

        <form class="form" action="./login" method="get">
            <input class="ui-input input"   size="60" placeholder="Account" name="account">
            <input class="ui-input"  size="60" placeholder="Password" type="password" name="password">
            <p style="color: red">${tips}</p>
            <button class="ui-button " data-type="primary" type="submit">Login</button>
        </form>

    </div>
</div>
</body>

</html>

<style>
    .content{
        height: 100%;
        /* background-image:  ; */
        background:center/100% ;
        background-size: cover;
        overflow:hidden
        /* filter: blur(2px); */
    }
    .box{

        opacity: 89%;
        text-align: center;
        margin-top: 5%;
        margin-left: 20%;
        margin-right: 20%;
        /* box-shadow: 16px 16px 19px 10px gray; */
        border-radius: 2px;
        padding: 8%;
        background-color: #ebebee;
    }
    .row{
        margin: 10px;
    }

    .input{
        padding: 40%;
        margin: 2%;
    }
    /* thead{
        background-color: yellow;

    } */
    /*背景模糊*/
    .bg{
        width:100%;
        height:100%;
        /* position: relative; */
        background: url("https://desk-fd.zol-img.com.cn/t_s1920x1080c5/g6/M00/02/07/ChMkKV9a7IKIGHE1ADJZOpkqrhIAACJlgAsjJgAMllS829.jpg") no-repeat center/100%;
        /* padding:20px; */
        /* box-sizing:border-box; */
        z-index:1;
    }
    .bg:after{
        content: "";
        width:100%;
        height:100%;
        position: absolute;
        left:0;
        top:0;
        background: inherit;
        filter: blur(5px);
        z-index: 2;
    }
    .drag{
        position: absolute;
        /*left:50%;*/
        /*top:50%;*/
        /*transform: translate(-50%,-50%);*/
        /*width:200px;*/
        /*height:200px;*/
        /*text-align: center;*/

        z-index:11;
    }

</style>